<template>
  <dpro-modal
    :destroyOnClose="true"
    class="preview-img-modal"
    title="卡片配置"
    :width="'fit-content'"
    :visible="visible"
    :footer="null"
    @cancel="close"
    :getContainer="getContainer"
    >
    <div class="dpro-modal-body-content">
      <div>
        <span class="dpro-modal-body-label">卡片名称</span> 
        <input type="text" maxlength="6" placeholder="请输入" v-model="cardName" />
        <span class="tip">限制6个字符</span>
      </div>
      <div class="flex" v-if="isDevice">
        <span class="dpro-modal-body-label">配置设备</span> 
        <div class="device-box flex flex-items-center" v-if="deviceCodes.length > 0">
          <dpro-button type="primary" class="btn-add"  @click="addDevice(deviceCodes)">已选择({{
              deviceCodes.length
          }})</dpro-button>
        </div>
        <dpro-button v-else @click="addDevice([])" class="btn-add">添加设备</dpro-button>
        <span class="tip">{{'默认全部'}}</span>
      </div>
    </div>
    <div class="alert-detail-footer">
      <dpro-button class="alert-detail-footer-btn" type="primary" @click.native="close">取 消</dpro-button>
      <dpro-button class="alert-detail-footer-btn" type="primary" @click.native="handleSet">配 置</dpro-button>
      <dpro-button class="alert-detail-footer-btn" type="primary" @click.native="handleDefault">恢复默认</dpro-button>
    </div>
    <dp-device-modal :getContainer="getContainer" :cardInfo="cardInfo" ref="deviceModal" @chooseDevice="handleAddDeviceOk" />
  </dpro-modal>
</template>

<script>
import { requestApi } from "../../utils/util";
import { API_URLS } from '../../api/index.js';
import DpDeviceModal from '../dp-device-modal/dp-device-modal.vue';
import { DproModal, DproButton } from "../../components/index";

export default {
  name: "dp-setting-modal",
  props:{
    label: {
      type: String
    },
    deviceCodesArg: {
      type: Array,
    },
    cardType: {
      type: Number,
      default: 1
    }, 
    getContainer: {
      type: Function,
      default: () => document.body
    },
    cardInfo: {
      type: Object
    },
    isDevice: {
      type: Boolean,
      default: true
    }
  },
  components: { DpDeviceModal, DproModal, DproButton },
  data() {
    return {
      visible: false,
      picInfo: {},
      cardName: '',
      deviceCodes: [],
      deviceListData: [],
    };
  },
  computed: {},
  created() {
      
  },
  methods: {
    init(){
      this.cardName = this.label
      this.getCardDeviceInfo()
    },
     getCardDeviceInfo() {
      requestApi({
        url: API_URLS.getCardDeviceInfo,
        method: 'post',
        data: { screenId: this.cardInfo.screenId, cardId:this.cardInfo.cardId, cardSeq: this.cardInfo.index },
        headers:{
          AccessToken: this.cardInfo.accessToken
        }
      }).then(res => {
        if (res.code === 0) {
          if(res.data?.cardName) this.cardName = res.data.cardName
          let deviceCodes = res?.data?.deviceCodes?.split(',') || []
          if(deviceCodes.length>0){
            this.getDeviceInfoByDevs(res?.data?.deviceCodes)
          }
        }
      })
    },
    getDeviceInfoByDevs(deviceCodes){
      if(!deviceCodes) return this.deviceCodes = []
      requestApi({
        url: API_URLS.getDeviceInfoByDevs,
        method: 'post',
        data: { deviceCodes },
        headers:{
          AccessToken: this.cardInfo.accessToken
        }
      }).then(res => {
        this.deviceCodes = res?.data?.list || []
      })
    },
    open(option) {
      this.picInfo = option
      this.visible = true;
      this.init()
    },
    /**
     * 打开弹窗或者关闭弹窗时通过修改卡片容器的z-index来解决弹窗层级的问题
     * @param {Boolean} back 是否重置z-index，关闭弹窗时传true
     */
     setZindex(back = false) {
      typeof(window.handleCardZIndex) === 'function' && window.handleCardZIndex({cardId: this.cardInfo.cardId, index:this.cardInfo.index, back});
    },
    openPreview(imageUrl) {
      this.previewImg = imageUrl;
      this.visible = true;
    },
    close() {
      // this.init()
      this.visible = false;
    },
    //图片损毁时触发
    imageOnError(type,item){
      item[type] = null
    },
    // 打开选择设备弹窗
    addDevice(deviceListData) {
      this.deviceListData = deviceListData;
      this.$refs.deviceModal?.open(this.deviceListData);
    },
    handleAddDeviceOk(deviceCodes) {
      this.deviceCodes = deviceCodes;
    },
    handleSet() {
      let deviceCodes = ''
      if(!this.cardName.trim()) {
        return wgt.showMessage({
            title: '请输入卡片名称',
            icon: 'error',
            duration: 3000
        });
      }
      if(this.deviceCodes.length>0){
        deviceCodes = this.deviceCodes.map(v=>v.deviceCode).join(',')
      }
      this.$emit('saveCardDeviceInfo', this.cardName, deviceCodes)
    },
    handleDefault() {
      this.$emit('saveCardDeviceInfo')
      this.close()
    }
  },
  watch: {
   deviceCodesArg(newVal,oldVal){
     console.log('newVal',newVal,123);
     if(newVal) this.deviceCodes = newVal
   },
    visible(val) {
      this.setZindex(!val)
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./dp-setting-modal.less");
</style>
